﻿<!DOCTYPE html>
<html>

<head>
	<title>分页插件</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="paging.css">
</head>

<body>
	<p>github:<a href="https://github.com/tianxiangbing/paging">https://github.com/tianxiangbing/paging</a></p>

	<p class="content"></p>

	<div id="pageTool"></div>

	<h2>hash记录页码的方式</h2>
	<div id="pageToolbar"></div>

	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="paging.min.js"></script>
	<script>
		var page = new Paging();
		page.init({	target: $('#pageTool'), pagesize: 10, count: 100,callback: function (pagecount, size, count) {

				// alert('当前第 ' + pagecount + '页,每页 ' + size + '条,总页数：' + count + '页');

				//这里我写个ajax吧
				getHTML();

				//如果你不用ajax分页，你可以直接在这里location.href='xxx.html?page='+pagecount 作跳转，这样的话，页面刷新后，你要传递current进来。
				// page.render({current: 2 });
			}
		});
		function getHTML(){
			$.get('demo.txt',function(res){
				$('.content').html('  当前时间：'+Date.now() +res);
			},'text')
		}


		//jquery插件的写法
		// 此处的hash的意思替换url上的后缀
		$('#pageToolbar').Paging({ pagesize: 10, count: 85, toolbar: true, hash: true ,changePagesize:function(ps){
			alert(ps)
		},callback:function(a){
			console.log(a)
		}});


		//下面是个ajax的例子
		/*
		var page = new Paging();
		$.post('url',{current:1,pagesize:10},function(res){
			//do something
			page.init({			
	target: $('#pageTool'), pagesize: 10, count: res.count, current:1,callback: function (pagecount, size, count) {
					$.post('url',{current:pagecount,pagesize:10},function(res){
						//do something
					})
				}
			});
		})
		
		*/
</script>
</body>
</html>